<template>
  <!-- 忘记密码 -->
  <div class="forget-password-box">
    <div class="title">
      <span>{{ title }}</span>
      <span @click="backToLogin()">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        <span>返回登录</span>
      </span>
    </div>

    <el-form :rules="formforgetRules" :model="formforget" class="form-code" size="large" style="max-width: 320px;">
      <div class="get-code-btn">
        <span>获取短信验证码</span>
      </div>
      <el-form-item prop="userName">
        <el-input v-model="formforget.userName" placeholder="请输入手机号或邮箱"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="formforget.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item prop="newPsw">
        <el-input v-model="formforget.newPsw" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-checkbox size="small" style="margin-top: 10px;">
          <span style="color: #ccc">登录即代表同意</span>
          <span>《xxx协议》《隐私协议》</span>
        </el-checkbox> -->
        <el-button style="width: 320px; margin-top: 40px;">完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import type { FormRules } from 'element-plus'
interface Props {
  isShowLogin: number;
  title: string
}
defineProps<Props>();
// (e: 'setIsShowLogin', isShowLogin: boolean) 第一个参数 e： 事件名 第二个 参数
const emit = defineEmits<{ (e: 'backToLogin', isShowLogin: number, boo: boolean): void }>()
// 返回登录
const backToLogin = (): void => {
  emit("backToLogin", 1, false)
}

const verifyMobilePhoneNumber = ({ }, value: any, callback: any) => {
  if (!(/^1[3-9]\d{9}$|^17[0-28]\d{8}$/.test(value))) {
    callback(new Error("请输入正确的手机号"))
  } else {
    callback()
  }
}
interface forgetType {
  code: string,
  userName: string,
  newPsw: string
}
const formforget = reactive<forgetType>({
  code: "",
  userName: "",
  newPsw: ""
})
const formforgetRules = reactive<FormRules<forgetType>>({
  code: { min: 6, max: 6, message: '请输入正确的验证码', trigger: ['blur'] },
  userName: { validator: verifyMobilePhoneNumber, trigger: ['blur'] },
  newPsw: [{ min: 6, max: 12, message: '密码字符长度在6-12位', trigger: ['blur'] }]
})

</script>

<style lang="scss" scoped>
* {
  margin: 0;
}

.forget-password-box {
  width: 360px;
  padding: 10px 20px 40px;

  .title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    font-family: MicrosoftYaHei-Bold;
    font-size: 20px;
    color: #2C2E40;
    font-weight: 700;

    span:nth-child(2) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: MicrosoftYaHeiUI;
      font-size: 14px;
      color: #31363F;
      font-weight: 400;
      cursor: pointer;

      span {
        padding: 0 4px;
      }
    }
  }

  .form-code {
    position: relative;

    :deep(.el-form-item__content) {

      div:nth-child(1) {
        margin-top: 30px;
      }

      div:nth-child(2) {
        div:nth-child(1) {
          padding-right: 100px;
        }
      }
    }

    :deep(.el-form-item__content div:nth-child(1) .el-input__wrapper) {
      padding-left: 10px;
      margin-top: 0;
    }

    .get-code-btn {
      position: absolute;
      left: 217px;
      top: 111px;
      z-index: 999;
      font-size: 12px;
      cursor: pointer;
      color: $main-color;
    }
  }


  .form-btn {
    margin-top: 50px;
  }
}
</style>